{{extend './layout.html'}}
{{block 'head'}}

<style>
    html {
        height: 100%;
    }

    body {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        background-color: rgb(235, 229, 229);
    }

    header {
        background-color: rgb(68, 68, 68);
        height: 50px;
    }

    .navbar {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;

        width: 80%;
        margin: 0 auto;
        height: 50px;
    }

    .navbar-left {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;

    }

    .search {
        border-radius: 20px;
        border: none;
        outline: none;

        background-color: #888;
        padding-left: 15px;
        transition: all .3s;
    }

    .navbar-right ul:nth-child(1) li {
        /* float: left; */
        display: inline-block;

        list-style: none;
    }

    .navbar-list a {
        padding: 10px 15px;

        color: #ccc;
        font-size: 14px;
    }

    .navbar-right a:hover {
        text-decoration: none;

        color: #fff;
    }

    .logo {
        width: 120px;
        height: 28px;

        margin: 0 10px;
    }

    form {
        display: inline-block;
    }

    .btn {
        margin-right: 10px;
        padding: 5px 20px;
        border-radius: 3px;
    }

    footer {
        height: 100px;

        padding: 30px 0 0 30px;
        margin: 15px 0 0 0;

        background-color: #fff;
        color: #666;
    }



    main {
        flex: 1;
        padding: 15px 0 0 0;
    }

    .main {
        max-width: 1400px;
        background-color: #fff;

        margin-right: 305px;
        border-radius: 3px;
    }

    aside {
        float: right;
        width: 290px;
        height: 400px;
        font-size: 14px;
    }

    aside::after {
        content: '';
        display: block;
        clear: both;
    }

    aside div:nth-child(2) {
        height: auto;
        text-align: center;
        padding: 20px 0;
    }

    .panel {
        background-color: #fff;
        margin-bottom: 15px;
        height: 200px;
        width: 100%;
    }

    .cell {
        width: 100%;
        padding: 15px;
        border-bottom: 1px solid #f0f0f0;
    }

    .userInfo {
        position: relative;
        display: flex;
        flex-flow: row wrap;
        align-items: center;

        padding: 0 !important;

        color: #fff !important;
    }

    .avatar {
        width: 28px;
        height: 24px;
    }

    .icon-xiala {
        height: 12px;
        width: 15px;
    }

    .userCount {
        display: none;
        position: absolute;

        width: 120px;
        background-color: #fff;
        text-align: left;
        padding-left: 0;
    }

    .userCount li {
        display: block !important;
        text-align: left;
        padding-left: 10px;
    }

    .userCount a {
        color: #000;
    }

    .userCount a:hover {
        color: #007bff;
    }

    .userNickname {
        color: #3498db;
    }
</style>
{{/block}}


{{block 'content'}}
<main>
    <div class="container">
        <form action="" id="userInfo_form">
            <div>
                <label for="">邮箱</label>
                <input type="text" name="email" value={{user.email}} readonly="readonly">
            </div>
            <div>
                <label for="">昵称</label>
                <input type="text" name="nickname" value={{user.nickname}}>
            </div>
            <div>
                <label for="">性别</label>
                <input type="text" name="gender" value={{user.gender}}>
            </div>
            <div>
                <button class="btn btn-primary">确定修改</button>
                <a href="/" class="btn btn-danger">取消</a>
            </div>
        </form>
    </div>
</main>
{{/block}}


{{block 'script'}}
<script>
    $(function () {
        $('.userInfo').on('click', function () {
            $('.userCount').toggle()
        })


        if ($('input[name=gender]').val() === '-1') {
            $(this).val("默认")
            console.log('change')
        }





        $('#userInfo_form').on('submit', function (e) {
            e.preventDefault()
            let formData = $(this).serialize()
            // console.log(formData)

            $.ajax({
                type: 'POST',
                url: '/userInfo',
                dataType: 'json',
                data: formData,
                success: function (data) {
                    // console.log(data)
                    if (data.code === 0) {
                        window.alert('更改成功，即将跳转')
                        window.location.href = '/'
                    } else {
                        window.alert('更改失败，请稍后再试')
                    }
                }
            })
        })




        // if()
    })
</script>

{{/block}}